<template>
	<view class="history_single_box">
		<!-- 投诉记录 -->
		<view class="user_message" v-if="complaintRecordTable.length > 0">
			<view class="user_message_user utils_patternOne" v-for="(item, index) in complaintRecordTable" :key="item.id">
				<!-- 区块标题 -->
				<view class="utils_title">
					<view class="title_text">
						<text class="title_left_text"> 第 {{ index + 1 }} 次投诉</text>
						<view class="tips"></view>
					</view>
				</view>
				
				<!-- 内容 -->
				<view class="user_message_conetnt">
					<view class="user_conetnt_item">
						<text class="user_content_text">投诉单号：{{item.id}}</text>
						<text class="user_content_text">投诉类型：{{item.bigClass}}</text>
						<text class="user_content_text">投诉子类：{{item.subClass}}</text>
						<text class="user_content_text">投诉小类：{{item.smallClass}}</text>
						<text class="user_content_text">投诉等级：{{item.level}}</text>
						<text class="user_content_text">投诉时间：{{item.createTime}}</text>
						<text class="user_content_text user_content_block">内容描述：{{item.content}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="user_message" v-else>
			<view class="user_message_user utils_patternOne">
				<!-- 区块标题 -->
				<view class="utils_title">
					<view class="title_text">
						<text class="title_left_text">1</text>
						<view class="tips"></view>
					</view>
				</view>
				
				<!-- 内容 -->
				<view class="user_message_conetnt">
					<view class="user_conetnt_item">
						<text class="user_content_text">投诉单号：--</text>
						<text class="user_content_text">投诉类型：--</text>
						<text class="user_content_text">投诉子类：--</text>
						<text class="user_content_text">投诉小类：--</text>
						<text class="user_content_text">投诉等级：--</text>
						<text class="user_content_text">内容描述：--</text>
						<text class="user_content_text">投诉时间：--</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js'
	import utils from '@/utils/uitils.js'
	export default {
		data () {
			return {
				recentComplaint: [],
				vin: '',
				complaintRecordTable: [], 
			}
		},
		
		onLoad (options) {
			console.log('投诉记录接收到的参数', options)
			this.vin = options.vin
		},
		
		mounted() {
			this.getGrtComplaintRecordList()
		},
		
		methods: {
			// 获取投诉记录
			async getGrtComplaintRecordList() {
				try {
					this.recentComplaint = []
	
					const res = await apiRqs.getGrtComplaintRecordList(this.vin)
					const result = JSON.parse(JSON.stringify(res.data))
					console.log('客户投诉记录', result)
	
					this.complaintRecordTable = result
					this.complaintRecordTable = this.complaintRecordTable.map(record => record === null ? '--' : record);
					
					if (result.length > 0) {
						const recentComplaint = []
						for (let i = 0; i < result.length; i++) {
							let diff =
								utils.getDaysBetween(
									result[i].createTime,
									utils.getDay(0)
								) * 1
							if (diff < 90) {
								recentComplaint.push(result[i])
							}
						}
						this.recentComplaint = recentComplaint
					}
	
				} catch (e) {
					console.error('客户投诉记录报错', e)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.history_single_box {
		padding: 24rpx;
		background-image: url('../../../static/byd-img/jiaoji@1x.png');
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% auto;
		
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		
		/* 公共样式-内外边距、背景色、边框弧度 */
		.utils_patternOne {
			margin-bottom: 32rpx;
			padding: 24rpx;
			border-radius: 16rpx;
			background-color: #fff;
		}
		
		/* 公共样式-区块标题 */
		.utils_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			
			.title_text {
				position: relative;
				font-size: 28rpx;
				font-weight: 500;
				color: #1D2129;
				.title_left_text {
					margin-left: 24rpx;
				}
				.tips {
					position: absolute;
					top: 8rpx;
					left: 0;
					border-radius: 8rpx;
					width: 8rpx;
					height: 24rpx;
					background: #0063FF;
				}
			}
			
			.utils_right_text {
				font-size: 28rpx;
				font-weight: bold;
				color: #0256FF;
			}
			
			.right_text_title {
				font-size: 24rpx;
				color: #86909C;
			}
		}
		
		/* 客户基础信息 */
		.user_message {
			margin-top: 32rpx;
			.user_message_user {
				.user_message_conetnt {
					.user_conetnt_item {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						
						font-family: 思源黑体;
						font-size: 24rpx;
						color: #4E5969;
						
						.user_content_text {
							margin-bottom: 24rpx;
							
							&:nth-child(odd) {
								margin-right: 10rpx;
								min-width: 400rpx;
							}
							
							.user_cart_copy {
								margin-left: 20rpx;
								color: #0063FF;
							}
						}
						.user_content_block {
							margin-right: 0;
							margin-bottom: 0;
							padding: 24rpx;
							border-radius: 16rpx;
							background: #F7F8FA;
						}
						
						&:last-child {
							margin-bottom: 0;
						}
						
					}
				}
			}
		}
		
		
		
	}
</style>